<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>
</head>
<body>
    <script src = "/js/vue.js"></script>
    <div id="app">
        <!-- 1. mustache用法，胡子语法，插值语法{{}}-->
        <p>{{msg}}</p >
        <!-- 2. v-once 只渲染一次 render-->
        <p v-once>{{msg}}</p >
        <!-- 3. v-pre 取消渲染-->
        <p v-pre> {{msg}}</p >
        <!-- 4. v-text 在DOM元素中插入文本内容，v-text会替换DOM中原来的内容-->
        <p v-text="message">{{msg}}1111111111111111123456</p >
        <!-- 5. v-html 用于输出元素的html内容，如果数据中包含html标签，将html标签解析后再输出-->
        <div v-html="myHtml"></div>
        <!-- 6. v_bind 数据绑定-->
        <!-- v-bind 可以简写成“：”语法糖就是简写-->
        <a v-bind:href="myUrl"></a >
         <a :href="myUrl">baidu</a >
        <!-- v-bind 动态绑定class属性 对象语法 class里面放一个对象-->


    </div>
    <script>
        let app = new Vue({
         el:"#app",
         data:{
            msg:'hello  world',
            message:"hello shane",
            myHtml:'<h1>Kitty</h1>',
            myUrl:'www.baidu.com',
         }
         })
     </script>

</body>
</html>